<template>
  <Card title="模式" :head-style="{ textAlign: 'center', fontWeight: 'bold' }">
    <div class="mb-2">
      <RadioGroup v-model:value="state.mode" button-style="solid">
        <template v-for="item in options" :key="`${item.value}`">
          <RadioButton :value="item.value">
            {{ item.label }}
          </RadioButton>
        </template>
      </RadioGroup>
    </div>
    <div class="mb-2 flex gap-2">
      <Checkbox v-model:checked="state.isRealTime" @change="handleChange">实时映射</Checkbox>
      <Checkbox
        v-model:checked="state.isAgainst"
        title="流程结束时自动冲抵源表单中的记录"
        @change="handleChange"
        v-show="false"
        >自动冲抵</Checkbox
      >
      <Checkbox
        v-model:checked="state.isMulti"
        v-if="state.mode == '0'"
        title="可以选择多个记录"
        @change="handleChange"
        >支持多选</Checkbox
      >
      <Checkbox
        v-model:checked="state.canManualInput"
        v-if="state.mode == '0'"
        title="可以输入新记录"
        @change="handleChange"
        >手工输入</Checkbox
      >
      <Checkbox
        v-model:checked="state.canOpenWinSel"
        v-if="state.mode == '0'"
        title="显示弹窗选择按钮"
        @change="handleChange"
        >弹窗选择</Checkbox
      >
      <Checkbox
        v-model:checked="state.isAjax"
        v-if="state.mode == '0'"
        title="ajax远程获取下拉框的选项，如勾选则点击下拉箭头时无下拉列表，反之则有下拉列表，最大显示500行"
        @change="handleChange"
        >远程获取</Checkbox
      >
    </div>
    <div class="flex gap-2">
      <div>request请求参数名称：</div>
      <div>
        <Input v-model:value="state.requestParam" @change="handleChange" />
      </div>
    </div>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Checkbox, Card, Input, Radio } from 'ant-design-vue';
  const RadioGroup = Radio.Group;
  const RadioButton = Radio.Button;
  const props = defineProps({
    modelValue: {
      type: Array,
      default: () => {
        return {};
      },
    },
  });
  const emit = defineEmits(['update:modelValue']);
  const state = ref<Recordable>({
    mode: '1',
    isRealTime: false,
    isAgainst: false,
    isMulti: false,
    canManualInput: false,
    canOpenWinSel: false,
    isAjax: false,
    requestParam: '',
  });
  watch(
    () => props.modelValue,
    (newVal) => {
      if (newVal) {
        if (newVal && Object.keys(newVal).length) {
          state.value = newVal as Recordable;
        }
      }
    },
    {
      immediate: true,
    },
  );
  const options = [
    {
      label: '窗口选择',
      value: '1',
    },
    {
      label: '下拉选择',
      value: '0',
    },
  ];

  const setEimt = () => {
    emit('update:modelValue', state.value);
  };

  const handleChange = () => {
    setEimt();
  };
</script>
